<template>
    <div class="app">
        <div class="bg"></div>
        <!--      {{snapForm}}-->
        <myNavbar title="京小东服务站"></myNavbar>
        <div class="banner">
            <img resize="contain" class="banner-image" :src="snapForm.thumbnail">
        </div>
        <div class="contain">
            <div class="contain_title padding-top20">
                <text class="font-size30 padding-left20">{{snapForm.name}}</text>
            </div>
            <div class="contain_price padding-top20">

                <text class="font-size30 padding-left20" style="color: red">价格:{{ (Number(snapForm.amount )) }}</text>
                <!--                <text class="font-size30 padding-left20" style="color: red">价格:{{(Number(snapForm.price) + (Number(snapForm.price)*Number(snapForm.addPrice)/100)).toFixed(2)}}</text>-->
            </div>
            <div class="contain_proposal padding-top20">
                <text class="font-size30 padding-left20">零售价格:{{snapForm.marketPrice}}</text>
            </div>
            <div class="contain_proposal padding-top20 padding-bottom20">
                <text class="font-size30 padding-left20">订单状态: {{snapForm.status | filterStatus}}</text>
            </div>
        </div>
        <div class="bottom">
            <div class="countDown padding-top20"><text class="countDown-text">{{snapForm.num | filterNum}}结束倒计时</text></div>
            <div class="status padding-top20"><text class="status-text">抢拍进行中</text></div>
            <div class="countDown padding-top20"><text style="color: red">{{d}}天{{h}}时{{m}}分{{s}}秒</text></div>
            <div class="undeline" style="margin-top: 20px;margin-bottom: 100px"></div>
        </div>

        <div class="button" @click="toIndex">
            <div class="button_left">
                <text class="font-siz40">首页</text>
            </div>
            <div :class="[snapForm.status == 1?'button_right':'button_rightTwo']" @click="snapClick">
                <text :class="[snapForm.status == 1?'font-siz40':'font-color']">{{snapForm.status == 1?'抢':snapForm.status | filterStatus}}</text>
            </div>
        </div>
    </div>
</template>

<script>
import myNavbar from "./components/myNavbar/snapUp.vue";
import { snap } from "../../../api/auctionOrder";

export default {
    name: "transferSystem",
    data() {
        return {
            sh: "",
            d: "",
            h: "",
            m: "",
            s: "",
            id: "",
            grabState: 0,
            snapClickFlag: false,
            snapForm: {},
        };
    },
    components: { myNavbar },
    created() {
        this.snapForm = app.config.params;
    },
    mounted() {
        this.freshTime();
        this.changenum();
    },
    filters: {
        filterStatus(val) {
            if (val == 0) {
                return "未上架";
            } else if (val == 1) {
                return "已上架";
            } else if (val == 2) {
                return "待付款";
            } else if (val == 3) {
                return "已付款";
            } else if (val == 4) {
                return "已流拍";
            } else if (val == 5) {
                return "申诉中";
            } else if (val == 6) {
                return "已完成";
            } else if (val == 7) {
                return "已提货";
            } else {
                return val;
            }
        },
        filterNum(val) {
            if (val == 0) {
                return "上午场";
            } else if (val == 1) {
                return "下午场";
            } else {
                return "晚上场";
            }
        },
    },
    methods: {
        toIndex() {
            eeui.openPage({
                url: "root://pages/index/index.js",
                statusBarType: "immersion",
                statusBarStyle: false,
            });
        },
        paymentClick() {
            eeui.openPage({
                url: "root://pages/member/transferSystem/rewardRecord.js",
                statusBarType: "immersion",
                statusBarStyle: false,
            });
        },
        snapClick() {
             if (this.getGlobalData().token == null) {
                eeui.toast('请先登录')
                return;
              }
            console.log("1111111111111111111111111111111");
            console.log(app.config.params.id);

            if (this.snapClickFlag == true) {
                return;
            }
            this.snapClickFlag = true;
            let params = {
                auctionOrderId: app.config.params.id,
            };
            console.log(app.config.params.id);

            snap(params)
                .then((res) => {
                    this.snapClickFlag = false;
                    eeui.toast({
                        message: "恭喜您请购成功,请在1小时内付款",
                    });
                    eeui.openPage({
                        url: "root://pages/member/transferSystem/rewardRecord.js",
                        statusBarType: "immersion",
                        statusBarStyle: false,
                    });
                })
                .catch((error) => {
                    console.info(error);
                    console.info("1111111111122222222222232132111111111111");

                    this.snapClickFlag = false;
                });
        },

        toRewardRecord() {
            eeui.openPage({
                url: "root://pages/member/transferSystem/rewardRecord.js",
                statusBarType: "immersion",
                statusBarStyle: false,
            });
        },

        checktime(i) {
            if (i < 10) {
                i = "0" + i;
            } else {
                i = i;
            }
            return i;
        },
        freshTime() {
            // new Date('2021/09/21').getTime()
            // var endtime=new Date('2021/09/21');  //这是中秋
            var endtime = new Date("2021/12/9"); //这是中秋
            var nowtime = new Date();
            // console.log(nowtime.getTime())
            // endtime.getTime()
            var lefttime = parseInt(endtime.getTime() - nowtime.getTime()); //这是毫秒，如果再/1000就是秒
            // 获取剩下的日、小时、分钟、秒钟
            // 一天有多少毫秒，一小时有多少毫秒，一分钟有多少毫秒，一秒钟有多少毫秒
            var dm = 24 * 60 * 60 * 1000;
            var d = parseInt(lefttime / dm);
            var hm = 60 * 60 * 1000;
            var h = parseInt((lefttime / hm) % 24);
            var mm = 60 * 1000;
            var m = parseInt((lefttime / mm) % 60);
            var s = parseInt((lefttime / 1000) % 60);
            m = this.checktime(m);
            s = this.checktime(s);
            this.d = d;
            this.h = h;
            this.m = m;
            this.s = s;
            // document.getElementById('LeftTime').innerHTML=d+"天"+h+"小时"+m+"分钟"+s+"秒";
            if (lefttime < 0) {
                // document.getElementById('LeftTime').innerHTML="活动已经结束！";
                this.d = "0";
                this.h = "00";
                this.m = "00";
                this.s = "00";
            }
        },
        changenum() {
            setInterval(() => {
                this.freshTime();
            }, 1000);
        },
    },
};
</script>

<style scoped>
.app,
body {
    background-color: rgba(248, 248, 248, 0.8);
}
.banner-image {
    width: 750px;
    height: 360px;
}
.banner {
    display: flex;
    flex-direction: column;
    width: 750px;
}
.contain {
    margin-top: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
}
.font-size30 {
    font-size: 30px;
}
.padding-left20 {
    padding-left: 20px;
}
.padding-top20 {
    padding-top: 20px;
}
.padding-bottom20 {
    padding-bottom: 20px;
}
.bottom {
    margin-top: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.undeline {
    height: 2px;
    background-color: red;
    width: 600px;
}
.countDown-text {
    font-size: 38px;
    font-weight: bold;
}
.status-text {
    font-size: 28px;
    color: red;
}
.button {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
}
.button_left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 375px;
    height: 100px;
    background-color: orange;
}
.button_right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 375px;
    height: 100px;
    background-color: red;
}
.button_rightTwo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 375px;
    height: 100px;
    background-color: white;
}
.font-siz40 {
    font-size: 40px;
    color: white;
}
.font-color {
    font-size: 40px;
    color: #333333;
}
</style>
